<template>
  <el-dialog :visible.sync="visible" :title="$t('label_export_mange')">
    <div v-loading="loading">
      <ex_super_form :data="searchData" :model="modelClone" :inline="true" :isSupportFold="false"/>
      <el-form :model="formData" class="formclass" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item :label="$t('label_export_field')" prop="readCellAttrList">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{
            $t('label_select_all') }}</el-checkbox>
          <div class="group">
            <el-checkbox-group v-model="formData.readCellAttrList" @change="handleCheckedChange">
              <el-checkbox v-for="(item, index) in fieldList" :key="index" :label="item">{{ item.name
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hide">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="sumbit">{{ $tt('label_confirm') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    queryUrl: '',
    queryParams: '',
    exportParams: '',
    exportUrl: '',
    searchData: [],
    searchModel: []
  },
  data() {
    return {
      loading: false,
      visible: false,
      isIndeterminate: false,
      checkAll: false,
      submitUrl: '',
      formData: {
        readCellAttrList: []
      },
      rules: {
        readCellAttrList: [{ type: 'array', required: true, message: this.$t('tip_export_field'), trigger: 'change' }]
      },
      fieldList: []
    };
  },
  computed: {
    modelClone() {
      const model = JSON.parse(JSON.stringify(this.searchModel))
      return model.filter(it => {
        it.render = null
        it.disabled = true
        return this.searchData[it.key] != null && this.searchData[it.key] != '' && this.searchData[it.key] != undefined
      })
    }
  },
  methods: {
    show() {
      this.visible = true
      this.query()
    },
    query() {
      this.$ajax({
        url: this.queryUrl,
        // type: 'json',
        data: this.queryParams,
        success: (res) => {
          if (res && res.data && res.data.rows) {
            this.fieldList = res.data.rows
            this.formData.readCellAttrList = res.data.rows
            this.checkAll = true
          }
        }
      });
    },
    handleCheckAllChange(val) {
      this.formData.readCellAttrList = []
      if (val) {
        this.fieldList.forEach(item => {
          this.formData.readCellAttrList.push(item)
        })
      }
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = this.fieldList.length === this.formData.readCellAttrList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length;
    },
    sumbit() {
      if (this.$clickFast()) return
      this.$refs['formRef'].validate((valid, obj) => {
        if (valid) {
          this.$functionCommon({
            url: this.exportUrl,
            type: 'json',
            data: {
              ...this.exportParams,
              readCellAttrList: this.formData.readCellAttrList
            },
            system: "wms",
            success:()=>{
              this.visible = false
            }
          })
          // this.$ajax({
          //   url: this.exportUrl,
          //   type: 'json',
          //   data: {
          //     ...this.exportParams,
          //     readCellAttrList: this.formData.readCellAttrList
          //   },
          //   success: (res) => {
          //     this.$message({
          //       message: this.$tt('tip_submit_success'),
          //       type: 'success'
          //     })
          //     this.visible = false
          //   }
          // })
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });
    },
    hide() {
      this.visible = false
      this.formData.field = []
    }
  },
};
</script>
<style lang="less" scoped>
.formclass {
  // margin: 0 100px;
}

.group {
  max-height: 400px;
  overflow-y: auto;

  .w_fill {
    margin-right: 0;
  }
}
</style>
